import React from "react";
import styled from "react-emotion";

import {
  OutlineButton,
  ContainedButton,
  ButtonGroup
} from "../../../shared/components/buttons";
import {
  SplashTitle,
  HighlightedTitle,
  SplashCopy,
  SplashContentContainer,
  SingleSplash
} from "./shared-components";
import { loginToServer } from "../../../shared/utils/login";

import LoginModal from "../../../shared/components/login-modal";

import DocsButton from "../docs-button";

const CURVE =
  '<svg width="30" height="20"><path d="M0,10C0,10,0.9816582025477492,8.094538731040567,1.5,8.063501606762694C1.984007594788815,8.034520336209686,2.53597349920063,8.973933620069552,3,9.583826235837485C3.550659855862917,10.307585286909084,4.018352531010813,12.210688372212948,4.5,12.190751568808349C5.021516601553427,12.169164464905936,5.458358926653866,9.044142076156424,6,8.999495584482174C6.468805113136552,8.960852828955542,6.939262288358343,11.058640142718401,7.5,11.173917564657565C7.959257202329226,11.268332449179082,8.480377930492189,10.439271992164082,9,10.230546023089646C9.483043284605744,10.036513314317803,10.041561852658223,10.192749211380546,10.5,9.92255569056776C11.062592310789935,9.590975960312008,11.474790296705654,8.678020437310781,12,8.170913670429329C12.47902870145976,7.708396137876169,13.00110540213546,7.3772441524193475,13.5,6.974959739498149C14.001115264712048,6.570884688508568,14.547839306770568,5.661727423114708,15,5.751738033310146C15.57823671153829,5.866846312340839,15.866024792814917,8.17124617796537,16.5,8.539139357221517C16.93649154358231,8.792433586817532,17.56734951546747,8.779169884668852,18,8.500885033039296C18.653795709008627,8.080357497807048,18.859201994740516,5.980309064258382,19.5,5.420229247267351C19.935089908604734,5.039945484855653,20.52018605402292,5.177579069265562,21,4.924991881306876C21.52408271036492,4.649100404665294,21.968056766673936,3.9634246155007395,22.5,3.7841163564575657C22.974575156121144,3.624145818817388,23.510871188288537,3.6797973648231452,24,3.7841163564575657C24.51190729646579,3.8932934314917707,25.058037542298596,4.045661790985338,25.5,4.454431772423407C26.110878737216257,5.01943200201645,26.435055582751424,7.12089298433913,27,7.211640969020569C27.45742371742397,7.2851177204218525,27.95936200465937,6.102251690800299,28.5,5.802976886238276C28.969369824867325,5.5431531893928865,29.49575089577666,5.473731929191698,30,5.408542222769515C30.495890595827042,5.344433110648674,31.04539989360088,5.624412684042298,31.5,5.408542222769515C32.07183525179359,5.1370017241222525,32.428164748206434,3.8407599953363643,33,3.5692194966891C33.45460010639913,3.3533490354163176,34.00000000000001,3.569219496689101,34.5,3.5692194966891C35.00000000000001,3.569219496689101,35.50000000000001,3.569219496689101,36,3.5692194966891C36.50000000000001,3.569219496689101,37.00000000000001,3.569219496689101,37.5,3.5692194966891C38.00000000000001,3.569219496689101,38.55674980509503,3.3251882163383426,39,3.5692194966891C39.60611492079731,3.902915909825648,40.028019153487534,5.066568327424791,40.5,5.939231146129261C41.03615679138797,6.930551239513222,41.345622607132185,8.948318393488975,42,9.233188448030095C42.432547891878,9.421489484853694,43.04515693015895,8.59075680713549,43.5,8.732267710451596C44.071221329742045,8.909986250592207,44.52233225417703,10.755877336465566,45,10.725044809021112C45.52720437408473,10.69101478820655,45.983120261097994,8.915288667314327,46.5,8.082745771745902C46.98513025801206,7.301342053753005,47.48011282034788,6.548381958179535,48,5.865977986338748C48.48284574733345,5.232194602822236,48.933986171654794,4.399882002232332,49.5,4.110883075797192C49.956971261530065,3.8775597939614785,50.53986392201511,3.8091725148373436,51,3.989788038531348C51.55879021301275,4.209127907294459,51.951016981833554,5.26218277327553,52.5,5.625495649403178C52.964876140306096,5.933147219649959,53.51557112026561,6.220427764910272,54,6.15710017626773C54.51778961187997,6.089411462988505,55.05317537896643,5.01923850316121,55.5,5.129638767668729C56.093962465851696,5.2763934679488615,56.40070320801386,7.810398575083581,57,7.970699125202353C57.44520191725194,8.089782212586986,57.97798851968737,7.204188621508192,58.5,7.025467516146499C58.98128883949874,6.8606886240387235,59.53857239859203,6.705675084581812,60,6.878864948435543C60.55600501612955,7.087553012937195,60.95410339220342,8.343314267343354,61.49999999999999,8.472174734305758C61.966485273947725,8.582289927134344,62.55411158529807,7.766678930357742,63,7.921340348000832C63.597004899916996,8.128418220214133,63.88984276917888,9.989785513303008,64.5,10.361821728137603C64.94215365493858,10.631419733126009,65.51194430630066,10.566850941724145,66,10.475154158926204C66.51320710033598,10.378731884547705,67.0604490939614,9.60725330449886,67.5,9.756399135445202C68.12044012156105,9.966923232225355,68.41241444349193,11.982888092184906,69,12.71151937703901C69.44888384085519,13.268154587162789,70.03124738585035,13.432905150162957,70.5,13.932493699720705C71.04173496103968,14.509865591121258,71.43650169558424,15.905532666518587,72,16.035635936686695C72.45804422683062,16.141391448860013,73.5,15.221168178520008,73.5,15.221168178520008" stroke="blue" fill="none" stroke-width="1.5"></path></svg>';

const Spark = styled("span")`
  svg {
    display: inline-block;
  }
`;

const CurveObj = <Spark dangerouslySetInnerHTML={{ __html: CURVE }} />; // eslint-disable-line

const ThreePointsContainer = styled("div")`
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto;
  margin-bottom: 60px;
`;

const Point = styled("div")`
  color: #8a7f8d;
  line-height: 1.4em;
  padding-left: 15px;
  padding-right: 15px;
`;

const PointTitle = styled("h3")`
  color: black;
  margin: 0;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: normal;
`;

const BottomDivider = styled("hr")`
  border: none;
  border-bottom: 1px solid darkgray;
`;

export default class MarketingCopySplash extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showLoginModal: false };
    this.hideLoginModal = this.hideLoginModal.bind(this);
    this.showLoginModal = this.showLoginModal.bind(this);
    this.login = this.login.bind(this);
  }
  showLoginModal() {
    this.setState({ showLoginModal: true });
  }

  hideLoginModal() {
    this.setState({ showLoginModal: false });
  }

  login() {
    // if a login callback is specified, then delegate the log
    // functionality to that. otherwise handle it ourselves
    // internally in a simplified way (essentially just reloading
    // the page on success)
    if (this.props.loginCallback) {
      this.props.loginCallback();
    } else {
      loginToServer(() => window.location.reload());
    }
  }

  render() {
    return (
      <SplashContentContainer>
        <SingleSplash>
          {/* <SplashImg width={100} src="https://camo.githubusercontent.com/b5dbd69518bd23f9eb2f9b722860e03d822fbcd6/68747470733a2f2f66696c65732e6769747465722e696d2f696f646964652d70726f6a6563742f696f646964652f7857314a2f696f646964652d737469636b65722d322e706e67" /> */}
          <SplashTitle>
            <HighlightedTitle>
              Iodide<sub>α</sub>
            </HighlightedTitle>{" "}
            lets you do data science {CurveObj} entirely in your browser.
          </SplashTitle>
        </SingleSplash>
        <SplashCopy>
          {
            "Create, share, collaborate, and reproduce powerful reports and visualizations with tools you already know. "
          }
        </SplashCopy>
        <ButtonGroup>
          <ContainedButton onClick={this.showLoginModal}>
            Sign Up For Free
          </ContainedButton>
          <LoginModal
            visible={this.state.showLoginModal}
            onClose={this.hideLoginModal}
            login={this.login}
          />
          <OutlineButton href="/tryit/">Try It Out</OutlineButton>
          <DocsButton />
        </ButtonGroup>
        <ThreePointsContainer>
          <Point>
            <PointTitle>
              Bring the power of the web to your data analysis.
            </PointTitle>
            Directly import and utilize the best-in-class visualization and UI
            tools in Javascript.
          </Point>
          <Point>
            <PointTitle>
              Combine Python, Javascript, Markdown, and CSS.
            </PointTitle>
            Choose the right language for the task with zero additional
            installation.
          </Point>
          <Point>
            <PointTitle>Share and remix your work.</PointTitle>
            Your notebook should be as easy to share as a web page.
          </Point>
        </ThreePointsContainer>
        <BottomDivider />
      </SplashContentContainer>
    );
  }
}
